<template>
  <view class="recharge-page">
    <!-- 顶部余额信息 -->
    <view class="balance-header">
      <view class="balance-info">
        <image src="/static/image/coin.png" class="coin-icon"></image>
        <text class="balance-label">余额</text>
        <text class="balance-value">{{ userInfo.balance || 0 }}</text>
      </view>
      <view class="balance-details" @click="goToBalanceDetails">
        <text class="details-text">余额明细</text>
      </view>
    </view>

    <!-- 充值选项 -->
    <view class="recharge-options">
      <view class="options-title">
        <text class="title-text">选择充值金额</text>
      </view>
      <view class="options-grid">
        <view class="option-card" v-for="(option, index) in rechargeOptions" :key="index"
          :class="{ active: selectedOption === index }" @click="selectOption(index)">
          <view class="option-content">
            <image src="/static/image/coin.png" class="coin-icon"></image>
            <text class="option-amount">{{ option.amount }}</text>
            <text class="option-label">{{ option.label }}</text>
            <view class="recommend-tag" v-if="option.recommended">推荐</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义充值 -->
    <view class="custom-recharge" v-if="selectedOption === 3">
      <view class="custom-input-wrapper">
        <text class="input-label">自定义金额</text>
        <input class="custom-input" v-model="customAmount" type="number" placeholder="请输入充值金额" @input="onCustomInput" />
      </view>
    </view>
    <view class="policy-footer">
      <view class="check" style="display: flex;align-items: center">
        <div style="display: flex;align-items: center" @click="setAgree()">
          <image v-if="agree" class="publish-icon" src="/static/radio_fill.png"></image>
          <image v-else class="publish-icon" src="/static/radio.png"></image>
          <text style="color: #8F959E;font-size: 28rpx">我已阅读并同意</text>
        </div>
        <text style="color: #E68627" @click="setAgree2('recharge_policy')">《充值协议》</text>
      </view>
    </view>
    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <ZButton type="primary" @click="confirmRecharge">确定充值</ZButton>
    </view>
  </view>
</template>

<script>
import ZButton from '@/components/ZButton.vue'
export default {
  components: {
    ZButton
  },
  data() {
    return {
      agree: false,
      selectedOption: 1, // 默认选中500元推荐选项
      customAmount: '',
      rechargeOptions: [
        { amount: '100', label: '100元' },
        { amount: '200', label: '200元', recommended: true  },
        { amount: '500', label: '500元'},
        { amount: '自定义', label: '自定义充值' }
      ]
    }
  },
  computed: {
    // 获取选中的充值金额
    selectedAmount() {
      if (this.selectedOption === 3) {
        return this.customAmount;
      }
      return this.rechargeOptions[this.selectedOption].amount;
    }
  },
  methods: {
    setAgree() {
      this.agree = !this.agree;
    },
    // 选择充值选项
    selectOption(index) {
      this.selectedOption = index;
      if (index !== 3) {
        this.customAmount = '';
      }
    },

    // 自定义金额输入处理
    onCustomInput(e) {
      this.customAmount = e.detail.value;
    },

    // 确认充值
    confirmRecharge() {
      if (this.selectedOption === 3 && !this.customAmount) {
        uni.showToast({
          title: '请输入充值金额',
          icon: 'none'
        });
        return;
      }

      const amount = this.selectedAmount;
      if (this.selectedOption === 3 && (isNaN(amount) || parseFloat(amount) <= 0)) {
        uni.showToast({
          title: '请输入有效的充值金额',
          icon: 'none'
        });
        return;
      }

      if (!this.agree) {
        uni.showToast({
          title: '请阅读并同意充值协议',
          icon: 'none'
        });
        return;
      }
      // 显示确认对话框
      uni.showModal({
        title: '确认充值',
        content: `确定要充值 ${amount} 元吗？`,
        confirmText: '确定充值',
        cancelText: '取消',
        confirmColor: '#FFC300',
        success: (res) => {
          if (res.confirm) {
            this.processRecharge(amount);
          }
        }
      });
    },

    // 处理充值逻辑
    processRecharge(amount) {
      console.log('确认充值:', amount);
      uni.showLoading({
        title: '充值中'
      });
      this.$api.createRecharge({
        user_id: this.userInfo.id,
        amount: amount
      }).then(res => {
        console.log(res);
        this.getPay(res.id)
      }).catch(error => {
        console.error('充值失败:', error);
      })
    },
    getPay(order_id) {
      uni.showLoading({
        title: '微信支付请求'
      });
      const that = this
      this.$api.createRechargePay({
        order_id
      }).then(payment => {
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: payment.timestamp,
          nonceStr: payment.nonce_str,
          package: payment.package,
          signType: payment.signType,
          paySign: payment.paySign,
          success: (result) => {
            uni.hideLoading()
            uni.showToast({
              title: '充值成功'
            });
            setTimeout(() => {
              that.$store.dispatch('getUserInfo')
            }, 3000)
          },
          fail: (result) => {
            uni.showToast({
              icon: 'none',
              title: result.errMsg,
            });
          },
        });
      })
    },
    // 跳转到余额明细
    goToBalanceDetails() {
      uni.navigateTo({
        url: '/pages/mine/balance'
      });
    },

    // 跳转到提现页面
    goToWithdraw() {
      uni.navigateTo({
        url: '/pages/mine/withdraw'
      });
    }
  },
  onShow() {
    this.$store.dispatch('getUserInfo')
  }
}
</script>

<style lang="scss">
page {
  height: 100vh;
  overflow: hidden;
  background: #FFFFFF;
}

.recharge-page {
  height: 100%;
  padding: 32rpx;
  display: flex;
  flex-direction: column;

  .policy-footer {
    width: 100%;
    font-size: 28rpx;
    font-weight: normal;
    color: #999;
    display: flex;
    justify-content: center;
    margin-top: 30rpx;

    .publish-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
  }

  .coin-icon {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    flex-shrink: 0;
  }

  // 顶部余额信息
  .balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48rpx;

    .balance-info {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .balance-label {
        font-size: 28rpx;
        color: #333333;
      }

      .balance-value {
        font-size: 48rpx;
        font-weight: bold;
        color: #333333;
      }
    }

    .balance-details {
      .details-text {
        font-size: 24rpx;
        color: #FF4D4F;
        cursor: pointer;

        &:active {
          opacity: 0.8;
        }
      }
    }
  }

  // 充值选项
  .recharge-options {
    .options-title {
      margin-bottom: 32rpx;

      .title-text {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
      }
    }

    .options-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24rpx;

      .option-card {
        position: relative;
        background: #FFFFFF;
        border: 2rpx solid #E8E8E8;
        border-radius: 16rpx;
        padding: 32rpx 16rpx;
        cursor: pointer;
        transition: all 0.3s ease;

        &.active {
          border-color: #FFC300;
          background: #FFF8E6;
        }

        &:active {
          transform: scale(0.98);
        }

        .option-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;

          .option-icon {
            width: 24rpx;
            height: 24rpx;
            margin-bottom: 8rpx;
            background: #FFC300;
            border-radius: 50%;
          }

          .option-amount {
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 8rpx;
          }

          .option-label {
            font-size: 24rpx;
            color: #666666;
          }

          .recommend-tag {
            position: absolute;
            top: -2rpx;
            right: -2rpx;
            background: #FF4D4F;
            color: #FFFFFF;
            font-size: 20rpx;
            padding: 4rpx 8rpx;
            border-radius: 8rpx;
          }
        }
      }
    }
  }

  // 自定义充值
  .custom-recharge {
    margin-top: 32rpx;

    .custom-input-wrapper {
      background: #F8F9FA;
      border-radius: 16rpx;
      padding: 24rpx;

      .input-label {
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 16rpx;
        display: block;
      }

      .custom-input {
        width: 100%;
        height: 80rpx;
        background: #FFFFFF;
        border: 2rpx solid #E8E8E8;
        border-radius: 12rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #333333;

        &:focus {
          border-color: #FFC300;
        }
      }
    }
  }

  // 底部操作按钮
  .bottom-actions {
    margin-top: 120rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    height: 80rpx;

    .confirm-btn {
      background: #666666;
      border-radius: 24rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &:active {
        opacity: 0.8;
      }

      .btn-text {
        color: #FFFFFF;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .withdraw-btn {
      background: #07C160;
      border-radius: 24rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &:active {
        opacity: 0.8;
      }

      .btn-text {
        color: #FFFFFF;
        font-size: 32rpx;
        font-weight: bold;
      }
    }
  }
}
</style>